<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const value = ref('')
const options = computed(() => {
  return props.data.map(item => item.label)
})

const list = ref([])
const timer = ref()
const index = ref(0)
const changeValue = val => {
  console.log(val)

  list.value = props.data.find(item => item.label === val)
}

const startAutoPlay = () => {
  if (timer.value) {
    clearInterval(timer.value)
  }

  timer.value = setInterval(() => {
    index.value = index.value + 1
    if (index.value >= props.data.length) {
      index.value = 0
    }
    changeValue(props.data[index.value % props.data.length].label)
    value.value = props.data[index.value % props.data.length].label
  }, 5000)
}

watch(
  () => props.data,
  () => {
    changeValue(props.data[index.value % props.data.length].label)
    value.value = props.data[index.value % props.data.length].label
    startAutoPlay()
  }
)

onMounted(() => {
  list.value = props.data[0]
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<template>
  <div style="width: 100%; height: 100%">
    <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
      <div class="dom-box">
        <div class="dom-title" style="display: flex; justify-content: space-between">
          <div>月度能耗排名</div>
          <div>
            <el-segmented v-model="value" :options="options" size="small" @change="changeValue" />
          </div>
        </div>
        <div class="dom-content">
          <div class="title" v-if="list">
            <div class="item-header"></div>
            <div style="flex: 1; display: flex; justify-content: space-between">
              <div>时间</div>
              <div>{{ list.unit }}</div>
            </div>
          </div>
          <div class="list" v-if="list">
            <div class="list-item" v-for="(item, index) in list.data">
              <div class="item-header">{{ index + 1 }}</div>
              <div class="item-content">
                <span>{{ item.Time }}</span>

                <span>{{ item.Value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box7>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-segmented__item) {
  color: #fff;
}

.title {
  padding: 5px 15px;
  display: flex;
  color: rgba($color: #fff, $alpha: 0.9);
  justify-content: space-between;
  align-items: center;
}

.dom-content {
  padding: 0 15px;
}
.list-item {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  color: rgba($color: #fff, $alpha: 0.9);

  align-items: center;

  &:nth-child(1) {
    .item-header {
      background-color: #eca641;
    }
    .item-content {
      background: linear-gradient(90deg, #eca641 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }

  &:nth-child(2) {
    .item-header {
      background-color: #1a6a67;
    }
    .item-content {
      background: linear-gradient(90deg, #1a6a67 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }

  &:nth-child(3) {
    .item-header {
      background-color: #2e36bb;
    }
    .item-content {
      background: linear-gradient(90deg, #2e36bb 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }
}

.item-header {
  width: 40px;
  height: 20px;
  text-align: center;

  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.item-content {
  flex: 1;
  margin-left: 10px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
}
</style>
